<template>
	<body class="bg-info dker">
		<section id="content" class="m-t-lg wrapper-md animated fadeInUp">
			<div class="container aside-xl">
				<a class="navbar-brand block" href="index.html"><span class="h1 font-bold">回归自性</span></a>
				<section class="m-b-lg">
					<header class="wrapper text-center">
						<strong>寻找本我</strong>
					</header>
					<form v-on:submit.prevent="login()">
						<div class="form-group">
							<input type="text" placeholder="账号" class="form-control rounded input-lg text-center no-border" v-model="model.username">
						</div>
						<div class="form-group">
							<input type="password" placeholder="密码" class="form-control rounded input-lg text-center no-border" v-model="model.password">
						</div>
						<button type="submit" class="btn btn-lg btn-warning lt b-white b-2x btn-block btn-rounded"><i class="icon-arrow-right pull-right"></i><span
							 class="m-r-n-lg">登 录</span></button>
						<div class="text-center m-t m-b"><a href="#"><small>忘记密码?</small></a></div>
						<div class="line line-dashed"></div>
						<p class="text-muted text-center"><small>还没有自己的账号?</small></p>
						<a href="/register" class="btn btn-lg btn-info btn-block rounded">创建一个账号</a>
					</form>
				</section>
			</div>
		</section>
		<!-- footer -->
		<footer id="footer">
			<div class="text-center padder">
				<p>
					<small>&copy; 2019 Zhao Yun 冀ICP证03173号</small>
				</p>
			</div>
		</footer>
		<!-- / footer -->
	</body>
</template>

<script>
	export default {
		name: "login",
		data() {
			return {
				model: {
					username: '',
					password: ''
				}
			}
		},
		methods: {
			login() {
				this.$api.auth.login(this.model).then(resp => {
					console.debug("loggedIn:", this.$api.auth.loggedIn());
					if (this.$api.auth.loggedIn()) {
						this.$api.auth.getByAccessToken().then(data => {
							sessionStorage.setItem('loggedInUser', JSON.stringify(data));
							this.$router.push("/");
						});
					}
				});
			}
		}
	}
</script>

<style>
</style>
